<template>
  <div>
    <template v-if="widget">
      <h1>{{formName}}</h1>
      <generate-form ref="generateForm" :data="widget" />
      <a-button type="primary" @click="handleSubmit">提交</a-button>
    </template>
  </div>
</template>

<script>
import GenerateForm from '../lib/form-making/src/components/GenerateForm.vue';
import FormTempleteStore from '../tool/FormTempleteStore';
import FormDataStore from '../tool/FormDataStore'
import { v4 as uuidv4 } from 'uuid'
export default {
  components: {
    GenerateForm,
  },
  data(){
    return {
      formName: '',
      widget: null,
    }
  },
  created(){
    console.log(this.$route);
    if (this.$route.query.formId) {
      this.generateForm(this.$route.query.formId);
    }
  },
  methods: {
    generateForm(formId){
      FormTempleteStore.read(formId).then((data) => {
        this.formName = data.name;
        this.widget = JSON.parse(data.formTemplete)
      }).catch((err) => {
        console.log(err.message)
      })
    },
    async handleSubmit(){
      try {
        const result = await this.$refs['generateForm'].getData();
        // this.$info({
        //   title: 'Data',
        //   content: JSON.stringify(result),
        //   onOk() {},
        // });
        console.log(JSON.stringify(result))
        FormDataStore.add({ id: uuidv4(), name: this.formName, data: JSON.stringify(result)}).then((res) => {
          this.$message.success(res)
        })
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>

<style></style>
